<template >
	<div v-if="isAlready">
		<el-card id="printCard" ref="printCard" class="box-card">
			<div ref="printableArea">
				<div style="text-align: center;">
					<el-row>
						<el-col :span="20">
							<h1 style="text-align: center;">{{ deptName }}{{ year }}{{ report.title }}</h1>
						</el-col>
						<el-col :span="4">
							<el-button style="display: block;" ref="exportBtn" class="floating-button" type="primary" size="default" :loading="loading"  @click="exportPagePDF"><el-icon class="el-icon-download"><Upload /></el-icon>导出盘点报告</el-button>
						</el-col>
					</el-row>
				</div>
				<div>
					<section>
						<h2>一、基本情况介绍</h2>
						<el-row>
							<el-col :span="10">
								<p>盘点目的：{{ introPurpose }}</p>
							</el-col>
							<el-col :span="8">
								<p>盘点账面基准日：{{ introDate }}</p>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10">
								<p>盘点时间：{{ checkDate }}</p>
							</el-col>
							<el-col :span="8">
								<p>盘点方式：{{ introMethod }}</p>
							</el-col>
						</el-row>
						<p>描述：为规范公司固定资产的管理，准确掌握公司实物资产的实有存量，保证公司实物资产的安全与完整，改善实物资产管理，提高实物资产使用效率，实现资产管理的科学化、规范化。根据国泰君安证券有限公司的资产盘点通知安排，盘点工作小组自{{startDate}}起对{{deptName}}各部门对固定资产逐一清点。本次盘点主要对资产全信息及使用情况进行确认。</p>
					</section>
				</div>
				<div>
					<section>
						<h2>二、盘点范围</h2>
						<p>{{ checkScope }}</p>
					</section>
				</div>
				<div>
					<section>
						<h2>三、盘点工作情况说明</h2>
						<div>
							<div>
								<p>（1）盘点过程：为规范公司固定资产的管理，准确掌握公司实物资产的实有存量，保证公司实物资产的安全与完整，改善实物资产管理，提高实物资产使用效率，实现资产管理的科学化、规范化。根据资产盘点通知安排，盘点工作小组自{{startDate}}起至{{endDate}}对{{deptName}}的固定资产逐一清点。本次盘点主要对资产全信息及账实对应情况进行确认。</p>
							</div>
							<div>
								<p>（2）盘点结果：</p>
								<div>
									<div>
										<p class="checkWorkPClass">1、数据汇总：</p>
										<div class="checkWorkDivClass">
											<el-table width="100%" tableLayout="fixed" :border="true" :data="[checkData]">
												<el-table-column align="center" prop="total" label="资产总数" />
												<el-table-column align="center" prop="actual" label="实盘" />
												<el-table-column align="center" prop="surplus" label="盘盈" />
												<el-table-column align="center" prop="shortage" label="盘亏" />
											</el-table>
										</div>
										<div class="checkWorkEchartsClass">
											<scEcharts height="200px" :option="option" ></scEcharts>
										</div>
									</div>
									<div>
										<p class="checkWorkPClass">2、资产汇总情况，固定资产共计{{assetCount}}件，实物{{ realityCount }}件：</p>
										<div>
											<div>
												<p class="checkWorkCountPClass">①．按资产类别汇总统计：</p>
												<div class="checkWorkCountTableClass">
													<el-table tableLayout="fixed" :border="true" :data="assetcategoryCount">
														<el-table-column align="center" prop="name" label="资产分类" />
														<el-table-column align="center" label="账面" >
															<el-table-column align="center" prop="assetCount" label="数量" />
														</el-table-column>
														<el-table-column align="center" label="实盘">
															<el-table-column align="center" prop="actualCount" label="数量" />
															<el-table-column align="center" prop="actualOriginalValue" label="原值" />
															<el-table-column align="center" prop="actualNetValue" label="净值" />
														</el-table-column>
														<el-table-column align="center" label="盘亏">
															<el-table-column align="center" prop="shortageCount" label="数量" />
															<el-table-column align="center" prop="shortageOriginalValue" label="原值" />
															<el-table-column align="center" prop="shortageNetValue" label="净值" />
														</el-table-column>
														<el-table-column align="center" label="盘盈" >
															<el-table-column align="center" prop="surplusCount" label="数量" />
														</el-table-column>
													</el-table>
												</div>
											</div>
											<div>
												<div class="largeTextClass">
													<p class="checkWorkCountPClass">②．按机构与资产类别汇总统计</p>
													<el-switch v-if="hasBusinessDept" ref="showDeptSwitch" style="margin-left: 10px;" v-model="showDeptCountFlag" active-text="以分公司维度汇总" inactive-text="以部门维度汇总"/>
												</div>
												<div v-if="!showDeptCountFlag" class="checkWorkCountPClass">
													<el-table tableLayout="fixed" :border="true" show-summary :data="deptCount.data">
														<el-table-column align="center" type="index" label="序号" />
														<el-table-column align="center" prop="name" label="机构名称" />
														<el-table-column align="center" v-for="(item) in deptCount.headerData" :label="item.label">
															<template v-if="item.childData && item.childData.length > 0">
																<el-table-column align="center"  v-for="(childItem) in item.childData" :prop="childItem.prop" :label="childItem.label">
																</el-table-column>
															</template>
														</el-table-column>
													</el-table>
												</div>
												<div class="checkWorkCountPClass" v-if="showDeptCountFlag">
													<el-table tableLayout="fixed" :border="true" show-summary :data="summaryDeptCount.data">
														<el-table-column align="center" type="index" label="序号" />
														<el-table-column align="center" prop="name" label="机构名称" />
														<el-table-column align="center" v-for="(item) in summaryDeptCount.headerData" :label="item.label">
															<template v-if="item.childData && item.childData.length > 0">
																<el-table-column align="center"  v-for="(childItem) in item.childData" :prop="childItem.prop" :label="childItem.label">
																</el-table-column>
															</template>
														</el-table-column>
													</el-table>
												</div>
											</div>
											<div v-if="isLastDept">
												<p class="checkWorkCountPClass">③．按总部、分公司、子公司汇总统计：</p>
												<div class="checkWorkCountPClass">
													<el-table tableLayout="fixed" :border="true" :data="checkReportDeptCount">
														<el-table-column align="center" prop="name" label="资产分类" />
														<el-table-column align="center" label="账面" >
															<el-table-column align="center" prop="assetCount" label="数量" />
														</el-table-column>
														<el-table-column align="center" label="实盘">
															<el-table-column align="center" prop="actualCount" label="数量" />
															<el-table-column align="center" prop="actualOriginalValue" label="原值" />
															<el-table-column align="center" prop="actualNetValue" label="净值" />
														</el-table-column>
														<el-table-column align="center" label="盘亏">
															<el-table-column align="center" prop="shortageCount" label="数量" />
															<el-table-column align="center" prop="shortageOriginalValue" label="原值" />
															<el-table-column align="center" prop="shortageNetValue" label="净值" />
														</el-table-column>
														<el-table-column align="center" label="盘盈" >
															<el-table-column align="center" prop="surplusCount" label="数量" />
														</el-table-column>
													</el-table>
												</div>
											</div>
										</div>
									</div>
									<div>
										<p class="checkWorkPClass">3、资产调转领用、移交及闲置情况：</p>
										<div class="checkWorkCountPClass">
											<el-table tableLayout="fixed" :border="true" :data="assetOperateCount.data">
												<el-table-column align="center" prop="deptName" label="机构名称" />
												<el-table-column align="center" v-for="(item) in assetOperateCount.headerData" :label="item.label">
													<template v-if="item.childData && item.childData.length > 0">
														<el-table-column align="center"  v-for="(chilItem) in item.childData" :prop="chilItem.prop" :label="chilItem.label">
														</el-table-column>
													</template>
												</el-table-column>
											</el-table>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p>（3）财务账与资产台账差异情况：</p>
								<div>
									<div>
										<p>1、资产汇总情况：财务账共有{{ assetCount }}件资产，行政账共有{{ assetCount }}件资产且存在实物{{ realityCount }}件，财务账比行政台账多0件资产，{{assetSummaryDescription}}。</p>
									</div>
									<div>
										<p>2、财务账务与行政账务差异情况说明：</p>
										<el-input style="width: 500px;display: block;" ref="differenceExplanationInput" clearable type="textarea" v-model="differenceExplanation" :rows="5" placeholder="请输入内容" />
										<p ref="differenceExplanationP" style="display: none;">{{differenceExplanation}}</p>
									</div>
								</div>
							</div>
						</div>
					</section>
				</div>
				<div>
					<section>
						<div class="largeTextClass">
							<h2>四、目前资产管理中存在的问题</h2>
							<el-button ref="problemsBtn" v-if="problemsFlag" style="margin-left: 5px;" type="primary" size="small" @click="updateProblems" :loading="loading" plain><el-icon><Edit/></el-icon>修改问题说明</el-button>
							<el-button v-if="!problemsFlag" style="margin-left: 5px;" type="primary" size="small" @click="saveProblems" :loading="loading" plain><el-icon><Select/></el-icon>保存</el-button>
							<el-button v-if="!problemsFlag" style="margin-left: 5px;" type="primary" size="small" @click="restProblems" :loading="loading" plain><el-icon><Close/></el-icon>取消</el-button>
						</div>
						<div ref="problemsDiv" v-if="!problemsFlag">
							<div v-if="checkProblems.length > 0" class="largeTextClass" v-for="(problems, index) in checkProblems" >
								<textarea  style="width: 500px;" type="textarea" placeholder="请输入问题说明" :rows="3" >{{problems}}</textarea>
								<el-button style="margin-left: 5px;" type="primary" size="small" @click="addProblems($event)" :loading="loading" plain><el-icon><Plus/></el-icon>新增问题说明</el-button>
								<el-button v-if="index > 0" style="margin-left: 5px;" type="primary" size="small" @click="delProblems($event)" :loading="loading" plain><el-icon><Plus/></el-icon>删除问题说明</el-button>
							</div>
							<div v-if="checkProblems.length === 0" class="largeTextClass">
								<textarea style="width: 500px;" type="textarea" placeholder="请输入问题说明" :rows="3"/>
								<el-button style="margin-left: 5px;" type="primary" size="small" @click="addProblems" :loading="loading" plain><el-icon><Plus/></el-icon>新增问题说明</el-button>
							</div>
						</div>
						<ul v-if="problemsFlag">
							<template v-for="(problems, index) in checkProblems">
								<li v-if="problems" :key="index">{{index+1+'.'}}{{ problems }}</li>
							</template>
						</ul>
					</section>
				</div>
				<div>
					<section>
						<div class="largeTextClass">
							<h2>五、本次盘点财务账务处理说明</h2>
							<el-button ref="explanationBtn" v-if="explanationFlag" style="margin-left: 5px;" type="primary" size="small" @click="updateExplanation" :loading="loading" plain><el-icon><Edit/></el-icon>修改处理说明</el-button>
							<el-button v-if="!explanationFlag" style="margin-left: 5px;" type="primary" size="small" @click="saveExplanation" :loading="loading" plain><el-icon><Select/></el-icon>保存</el-button>
							<el-button v-if="!explanationFlag" style="margin-left: 5px;" type="primary" size="small" @click="restExplanation" :loading="loading" plain><el-icon><Close/></el-icon>取消</el-button>
						</div>
						<div ref="explanationDiv" v-if="!explanationFlag">
							<div v-if="explanations.length > 0" class="largeTextClass" v-for="(explanation, index) in explanations" >
								<textarea  style="width: 500px;" type="textarea" placeholder="请输入建议" :rows="3" >{{explanation}}</textarea>
								<el-button style="margin-left: 5px;" type="primary" size="small" @click="addExplanation($event)" :loading="loading" plain><el-icon><Plus/></el-icon>新增处理说明</el-button>
								<el-button v-if="index > 0" style="margin-left: 5px;" type="primary" size="small" @click="delExplanation($event)" :loading="loading" plain><el-icon><Plus/></el-icon>删除处理说明</el-button>
							</div>
							<div v-if="explanations.length === 0" class="largeTextClass">
								<textarea style="width: 500px;" type="textarea" placeholder="请输入建议" :rows="3"/>
								<el-button style="margin-left: 5px;" type="primary" size="small" @click="addExplanation" :loading="loading" plain><el-icon><Plus/></el-icon>新增处理说明</el-button>
							</div>
						</div>
						<ul v-if="explanationFlag">
							<template v-for="(explanation, index) in explanations">
								<li v-if="explanation" :key="index">{{index+1+'.'}}{{ explanation }}</li>
							</template>
						</ul>
					</section>
				</div>
				<div>
					<section>
						<div class="largeTextClass">
							<h2>六、资产管理工作建议及后续努力的方向</h2>
							<el-button ref="suggestionsBtn" v-if="suggestionsFlag" style="margin-left: 5px;" type="primary" size="small" @click="updateSuggestion" :loading="loading" plain><el-icon><Edit/></el-icon>修改意见</el-button>
							<el-button v-if="!suggestionsFlag" style="margin-left: 5px;" type="primary" size="small" @click="saveSuggestion" :loading="loading" plain><el-icon><Select/></el-icon>保存</el-button>
							<el-button v-if="!suggestionsFlag" style="margin-left: 5px;" type="primary" size="small" @click="restSuggestion" :loading="loading" plain><el-icon><Close/></el-icon>取消</el-button>
						</div>
						<div ref="inputDiv" v-if="!suggestionsFlag">
							<div v-if="suggestions.length > 0" class="largeTextClass" v-for="(suggestion, index) in suggestions" >
								<textarea  style="width: 500px;" type="textarea" placeholder="请输入建议" :rows="3" >{{suggestion}}</textarea>
								<el-button style="margin-left: 5px;" type="primary" size="small" @click="addSuggestion($event)" :loading="loading" plain><el-icon><Plus/></el-icon>新增意见</el-button>
								<el-button v-if="index > 0" style="margin-left: 5px;" type="primary" size="small" @click="delSuggestion($event)" :loading="loading" plain><el-icon><Plus/></el-icon>删除意见</el-button>
							</div>
							<div v-if="suggestions.length === 0" class="largeTextClass">
								<textarea style="width: 500px;" type="textarea" placeholder="请输入建议" :rows="3"/>
								<el-button style="margin-left: 5px;" type="primary" size="small" @click="addSuggestion" :loading="loading" plain><el-icon><Plus/></el-icon>新增意见</el-button>
							</div>
						</div>
						<ul v-if="suggestionsFlag">
							<template v-for="(suggestion, index) in suggestions">
								<li v-if="suggestion" :key="index">{{index+1+'.'}}{{ suggestion }}</li>
							</template>
						</ul>
					</section>
				</div>
				<div><section>
					<p class="marginClass">备注：</p>
					<p class="marginClass">IT设备：电子设备类</p>
					<p class="marginClass">非IT设备：除电子设备类、房产设备类、其他设备类的总称</p>
				</section></div>
				<div>
					<footer class="footerClass">
						<p class="footerPClass marginClass">资产管理员：</p>
						<p class="footerPClass marginClass">财务负责人：</p>
						<p class="footerPClass marginClass">单位负责人：</p>
						<p class="marginClass">{{ deptName }}</p>
						<p class="marginClass">报告日期：{{ nowDate }}</p>
					</footer>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
import { Delete,Plus,Select, Edit, Close, Upload } from '@element-plus/icons-vue'
import scEcharts from "@/components/scEcharts/index.vue";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import router from "@/router";
import useTabs from "@/utils/useTabs";

export default {
	components: {Upload,Edit,Plus,Delete,Select,Close, scEcharts},
	computed: {
	},
	data() {
		return {
			isAlready: false,
			deptName: '',
			year: '',
			introDate: '',
			checkDate: '',
			startDate: '',
			endDate: '',
			nowDate: '',
			introPurpose: '全面了解固定资产使用情况',
			introMethod: '实地盘点法',
			checkScope: '',
			checkData: {
				total: 0,
				actual: 0,
				surplus: 0,
				shortage: 0
			},
			assetCount: 0,
			realityCount: 0,
			assetSummaryDescription: '',
			assetcategoryCount: [],
			deptCount : {
				headerData:[],
				data: [],
			},
			differenceExplanation:	'',
			hasBusinessDept:false,
			summaryDeptCount : {
				headerData:[],
				data: [],
			},
			isLastDept: false,
			checkReportDeptCount : [],
			assetOperateCount: {
				headerData: [],
				data: [],
			},
			suggestionsFlag: true,
			suggestions: [''],
			oldSuggestion:[''],
			checkProblems: [''],
			oldCheckProblems:[''],
			problemsFlag: true,
			explanations: [''],
			oldExplanations:[''],
			explanationFlag: true,
			showDeptCountFlag: false,
			option:{
				title: {
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					itemWidth: 10,
					itemHeight: 5,
					textStyle: {
						fontSize: 10 // 设置图例字体大小为10
					},
				},
				series: [
					{
						name: '资产盘点',
						type: 'pie',
						radius: '60%',
						center: ['40%', '40%'],
						data: [
							{ value: 0, name: '盘盈' },
							{ value: 0, name: '盘亏' },
							{ value: 0, name: '实盘' }
						],
						label: {
							show: true,
							formatter: '{b}: {c} ({d}%)',
						},
					}
				]
			},
			report: {
				title: "年度固定资产盘点报告（账内）",
				intro: {
					purpose: "全面了解固定资产使用情况",
					date: "2021年12月15日",
					period: "2021年12月X日—2021年12月X日",
					method: "实地盘点法",
					description: "为规范公司固定资产的管理，准确掌握公司实物资产的实有存量，保证公司实物资产的安全与完整，改善实物资产管理，提高实物资产使用效率，实现资产管理的科学化、规范化。根据XX集团的资产盘点通知安排，盘点工作小组自2021年XX月XX日起对XX集团各部门对固定资产逐一清点。本次盘点主要对资产全信息及使用情况进行确认。"
				},
				scope: "本次盘点盘点范围，主要对公司的一般固定资产（IT设备、非IT设备）、大宗固定资产（含车辆，房产）等进行数量、购置时间、规格型号、使用人及部分资产状态更新等信息进行盘点清查。",
				work: {
					process: "为规范公司固定资产的管理，准确掌握公司实物资产的实有存量，保证公司实物资产的安全与完整，改善实物资产管理，提高实物资产使用效率，实现资产管理的科学化、规范化。根据资产盘点通知安排，盘点工作小组自YY年YY月YY日起至YY年YY月YY日对XX的固定资产逐一清点。本次盘点主要对资产全信息及账实对应情况进行确认。",
				},
				problems: ["问题1", "问题2"],
				financial: {
					explanation: ["说明1", "说明2"]
				},

				signatures: {
					assetManager: "XXX",
					financeManager: "XXX",
					unitManager: "XXX"
				},
			},
			searchParams:{},
			fixedParams:{},
			loading:false,
		};
	},
	async created() {
		//如果是通过跳转过来的，标签的名称设置为跳转后的标题
		let route = router.currentRoute.value;
		if (route.meta) {
			this.title = route.meta.title;
		}
		let routeParams = this.$store.state.routeParams[this.$route.params.key];
		if (routeParams) {
			if (routeParams.title) {
				useTabs.setTitle(routeParams.title);
				document.title = routeParams.title;
			}
			if (routeParams.fixedParams) {
				if (routeParams.fixedParams.taskId) {
					this.searchParams.taskId = routeParams.fixedParams.taskId;
				}
				if (routeParams.fixedParams.ids) {
					this.searchParams.ids = routeParams.fixedParams.ids;
				}
			}
			if (routeParams.searchParams) {
				Object.assign(this.searchParams, routeParams.searchParams);
			}
		}
		// await this.getData();
		this.isAlready = true;
	},
	methods: {
		async getData() {
			let res = await this.$API.asset.checkDetailApi.checkReport.post(this.searchParams);
			if (res.code === 2000 && res.data) {
				this.deptName = res.data.deptName;
				this.year = res.data.year;
				this.introDate = res.data.startDate;
				this.startDate = res.data.startDate;
				this.endDate = res.data.endDate;
				this.nowDate = res.data.nowDate;
				this.checkDate = res.data.startDate + '-' + res.data.endDate;
				this.checkScope = res.data.mainCategoryName;
				if(res.data.totalCount){
					this.checkData.totalCount = res.data.totalCount;
				}
				if(res.data.doCount){
					this.checkData.actual = res.data.doCount;
				}
				if(res.data.surplusCount){
					this.checkData.surplus = res.data.surplusCount;
				}
				if(res.data.lossCount){
					this.checkData.shortage = res.data.lossCount;
				}
				if(res.data.assetCount){
					this.assetCount = res.data.assetCount;
				}
				if(res.data.realityCount){
					this.realityCount = res.realityCount;
				}
				if(this.assetCount >= this.realityCount){
					let difference = this.assetCount - this.realityCount;
					this.assetSummaryDescription = '财务账比资产实物多'+difference+'件资产';
				}else{
					let difference = this.realityCount - this.assetCount;
					this.assetSummaryDescription = '财务账比资产实物少'+difference+'件资产';
				}
				this.option.series[0].data = [
					{value: this.checkData.surplus, name: '盘盈'},
					{value: this.checkData.shortage, name: '盘亏'},
					{value: this.checkData.actual, name: '实盘'}
				];
				if(res.data.assetCategoryCountVos){
					this.assetcategoryCount = res.data.assetCategoryCountVos;
				}
				if (res.data.hasBusinessDept) {
					this.hasBusinessDept = res.data.hasBusinessDept;
				}
				if (res.data.deptCount) {
					this.deptCount = res.data.deptCount;
				}
				if (res.data.summaryDeptCount) {
					this.summaryDeptCount = res.data.summaryDeptCount;
				}
				if (res.data.isLastDept) {
					this.isLastDept = res.data.isLastDept;
				}
				if (res.data.checkReportDeptCount) {
					this.checkReportDeptCount = res.data.checkReportDeptCount;
				}
				if (res.data.assetOperateCount) {
					this.assetOperateCount = res.data.assetOperateCount;
				}
			}else {
				this.$message.warning(this.$t("code." + res.code));
			}
		},
		async exportPDF() {
			const content = this.$refs.printableArea;
			const canvas = await html2canvas(content);
			const imgData = canvas.toDataURL('image/png');
			const doc = new jsPDF({
				orientation: 'portrait',
				unit: 'px',
				format: 'a4',
			});
			const imgProps= doc.getImageProperties(imgData);
			const pdfWidth = doc.internal.pageSize.getWidth();
			const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
			doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
			doc.save('export.pdf');
		},
		async exportPagePDF() {
			if(!this.explanationFlag){
				this.$message.warning('请先保存处理说明');
			}
			if(!this.suggestionsFlag){
				this.$message.warning('请先保存意见');
			}
			if(!this.problemsFlag){
				this.$message.warning('请先保存问题说明');
			}
			this.$refs.exportBtn.$el.style.display = 'none';
			this.$refs.problemsBtn.$el.style.display = 'none';
			this.$refs.explanationBtn.$el.style.display = 'none';
			this.$refs.suggestionsBtn.$el.style.display = 'none';
			this.$refs.differenceExplanationInput.$el.style.display = 'none';
			this.$refs.differenceExplanationP.style.display = 'block';
			if(this.hasBusinessDept){
				this.$refs.showDeptSwitch.$el.style.display = 'none';
			}
			this.loading = true;
			try {
				const content = this.$refs.printableArea;
				const canvas = await html2canvas(content);
				const pdf = jsPDF({
					orientation: 'portrait',
					unit: 'mm',
					format: 'a4',
				});// A4纸，纵向
				const ctx = canvas.getContext('2d');
				const a4w = 190;
				const a4h = 270; // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
				const imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
				let renderedHeight = 0;

				while (renderedHeight < canvas.height) {
					const page = document.createElement('canvas');
					page.width = canvas.width;
					page.height = Math.min(imgHeight, canvas.height - renderedHeight);// 可能内容不足一页

					// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
					page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
					pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); // 添加图像到页面，保留10mm边距

					renderedHeight += imgHeight;
					if (renderedHeight < canvas.height) {
						pdf.addPage();// 如果后面还有内容，添加一个空页
					}
				}
				pdf.save('export.pdf');

			} finally  {
				this.loading = false;
				this.$refs.exportBtn.$el.style.display = 'block';
				this.$refs.problemsBtn.$el.style.display = 'block';
				this.$refs.explanationBtn.$el.style.display = 'block';
				this.$refs.suggestionsBtn.$el.style.display = 'block';
				this.$refs.differenceExplanationInput.$el.style.display = 'block';
				this.$refs.differenceExplanationP.style.display = 'none';
				if(this.hasBusinessDept){
					this.$refs.showDeptSwitch.$el.style.display = 'block';
				}
			}

		},
		updateSuggestion() {
			this.oldSuggestion = [];
			Object.assign(this.oldSuggestion, this.suggestions);
			this.suggestionsFlag = false;
		},
		saveSuggestion() {
			this.oldSuggestion = [''];
			let suggestionsDiv = this.$refs.inputDiv;
			let textHtml = suggestionsDiv.querySelectorAll('textarea[type="textarea"]');
			let textValues = [];
			textHtml.forEach((item) => {
				if(item.value){
					textValues.push(item.value)
				}
			})
			if(textValues.length === 0){
				textValues.push('');
			}
			this.suggestions = textValues;
			this.suggestionsFlag = true;
		},
		restSuggestion() {
			this.suggestions = [''];
			Object.assign(this.suggestions, this.oldSuggestion);
			this.oldSuggestion = [''];
			this.suggestionsFlag = true;
		},
		addSuggestion(event) {
			this.suggestions.push('');
		},
		delSuggestion(event) {
			//删除按钮所在的div
			event.currentTarget.parentElement.remove();
		},
		updateProblems() {
			this.oldCheckProblems = [];
			Object.assign(this.oldCheckProblems, this.checkProblems);
			this.problemsFlag = false;
		},
		saveProblems() {
			this.oldCheckProblems = [''];
			let problemsDiv = this.$refs.problemsDiv;
			let textHtml = problemsDiv.querySelectorAll('textarea[type="textarea"]');
			let textValues = [];
			textHtml.forEach((item) => {
				if(item.value){
					textValues.push(item.value)
				}
			})
			if(textValues.length === 0){
				textValues.push('');
			}
			this.checkProblems = textValues;
			this.problemsFlag = true;
		},
		restProblems() {
			this.checkProblems = [];
			Object.assign(this.checkProblems, this.oldCheckProblems);
			this.oldCheckProblems = [''];
			this.problemsFlag = true;
		},
		addProblems(event) {
			this.checkProblems.push('');
		},
		delProblems(event) {
			//删除按钮所在的div
			event.currentTarget.parentElement.remove();
		},
		updateExplanation() {
			this.oldExplanations = [];
			Object.assign(this.oldExplanations, this.explanations);
			this.explanationFlag = false;
		},
		saveExplanation() {
			this.oldExplanations = [''];
			let explanationDiv = this.$refs.explanationDiv;
			let textHtml = explanationDiv.querySelectorAll('textarea[type="textarea"]');
			let textValues = [];
			textHtml.forEach((item) => {
				if(item.value){
					textValues.push(item.value)
				}
			})
			if(textValues.length === 0){
				textValues.push('');
			}
			this.explanations = textValues;
			this.explanationFlag = true;
		},
		restExplanation() {
			this.explanations = [];
			Object.assign(this.explanations, this.oldExplanations);
			this.oldExplanations = [''];
			this.explanationFlag = true;
		},
		addExplanation(event) {
			this.explanations.push('');
		},
		delExplanation(event) {
			//删除按钮所在的div
			event.currentTarget.parentElement.remove();
		},
	}
};
</script>

<style scoped>
	.box-card{
		width: 90%;
		margin: 10px 5% 10px 5%;
		line-height: 2.0;
		font-size: 14px;
	}
	.checkWorkDivClass{
		width:35%;
		margin-left: 10%;
	}
	.checkWorkPClass{
		margin-left: 3%;
	}
	.checkWorkEchartsClass{
		width: 35%;
		margin-left: 10%;
		margin-top: 10px;
	}
	.checkWorkCountPClass{
		margin-left: 5%;
	}
	.checkWorkCountTableClass{
		margin-left: 5%;
	}
	.largeTextClass {
		display:flex;
		align-items: center;
		margin-top: 10px;
	}
	.footerClass {
		text-align: right;
	}
	.footerPClass{
		margin-right: 7%;
	}
	.marginClass{
		font-size: 14px;
	}
	/* 添加样式以美化页面 */
	h1, h2 {
		color: #2c3e50;
	}
	p, ul {
		color: #34495e;
	}
	.floating-button {
		position: fixed; /* 使按钮位置固定 */
		bottom: 20px;   /* 距离底部20像素 */
		right: 20px;    /* 距离右侧20像素 */
		z-index: 1000;  /* 确保按钮在其他内容之上 */
	}
</style>
